<template>
    <div class="inspectorManage-n-1-staging">
        <!-- 70% -->
        <div class="inspectorManage-n-1-left" :key="inspectorManageLeftKet">
            
            <div class="toDoTasks-annual-box" > 
                <div class="toDoTasks-box" :style="{height:calendarHeight+'px',}">
                    <div style="display: flex;justify-content: space-evenly;flex-wrap: wrap;">
                        <div v-for="(item,index) in menus" :key="index" class="toDoTasks-annual-for" @click="$router.push(item.children && item.children.length?item.children[0].path:item.path)" v-if="index && index<4">
                            <span class="tips-box" v-if="item.meta.title == '审评任务管理' && spcyCount">{{ Number(spcyCount)>99?'99+':spcyCount }}</span>
                            <span class="tips-box" v-if="item.meta.title == '审评工作考核' && jcgzkhCount">{{ Number(jcgzkhCount)>99?'99+':jcgzkhCount }}</span>
                            <div class="at-y-icon" :class="'at-y-bg'+index">
                                <ych-icon v-if="item.meta.icon && item.meta.icon.indexOf('spcy-icon') == -1" :type="item.meta.icon" />
                                <span v-else :class="'iconfont '+item.meta.icon"></span>
                            </div>
                            <span class="at-y-title">{{ item.meta.title }}</span>
                        </div>
                    </div>
                    <div style="display: flex;justify-content: space-evenly;flex-wrap: wrap;">
                        <div v-for="(item,index) in menus[2].children" :key="index" class="toDoTasks-annual-for" @click="$router.push(item.path)" v-if="index == 2 && item.meta.title == '审评任务报名'">
                            <div class="at-y-icon" :class="'at-y2-bg'+index">
                                <ych-icon v-if="item.meta.icon && item.meta.icon.indexOf('spcy-icon') == -1" :type="item.meta.icon" />
                                <span v-else :class="'iconfont '+item.meta.icon"></span>
                            </div>
                            <span class="at-y-title">{{ item.meta.title }}</span>
                        </div>
                        <div v-for="(item,index) in menus" :key="index" class="toDoTasks-annual-for" @click="$router.push(item.children && item.children.length?item.children[0].path:item.path)" v-if="index && index>4 && index<7">
                            <div class="at-y-icon" :class="'at-y2-bg'+index">
                                <ych-icon v-if="item.meta.icon && item.meta.icon.indexOf('spcy-icon') == -1" :type="item.meta.icon" />
                                <span v-else :class="'iconfont '+item.meta.icon"></span>
                            </div>
                            <span class="at-y-title">{{ item.meta.title }}</span>
                        </div>
                    </div>
                </div>
                <div class="annual-box" :style="{height:calendarHeight+'px',}">
                    <div class="annual-select" >
                        <h3 class="title-h3">年度选派及审评情况</h3>
                        <div style="display: flex;justify-content: space-between;margin: 6px 0;">
                            <span>
                                <span>合计选派</span>
                                <span class="annual-num num-green">{{overallSituation.hjxpCount?overallSituation.hjxpCount:0}}</span>
                                <span>次</span>
                            </span>
                            <span>
                                <span>合计审评</span>
                                <span class="annual-num num-green">{{overallSituation.hjjcCount?overallSituation.hjjcCount:0}}</span>
                                <span>次</span>
                            </span>
                        </div>
                        <div style="display: flex;justify-content: space-between;margin: 6px 0;">
                            <span>
                                <span>拒绝选派</span>
                                <span class="annual-num">{{overallSituation.jjxpCount?overallSituation.jjxpCount:0}}</span>
                                <span>次</span>
                            </span>
                            <span>
                                <span>出勤率</span>
                                <span class="annual-num">{{overallSituation.cqlCount?overallSituation.cqlCount:0}}%</span>
                            </span>
                        </div>
                    </div>
                    <div class="annual-education">
                        <h3 class="title-h3">本年度教育时长</h3>
                        <div style="display: flex;flex-direction: column;align-items: center;">
                            <span style="padding: 5px 0;display: inline-block;">
                                <span class="annual-num num-hs">{{overallSituation.hours?overallSituation.hours:0}}</span>
                                <span>小时</span>
                            </span>
                            <a href="#">(每年培训教育时长≥60)</a>
                            <span style="padding: 5px 0;display: inline-block;">请继续努力！</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="announcement-updates-box">
                <div class="notice-box" :style="{height:'calc(100vh - '+(130+calendarHeight)+'px)'}">
                    <div style="padding: 0 6px;display: flex;justify-content: space-between;align-items: center;">
                        <h3 class="title-h3" >通知公告</h3>
                        <a href="#" style="text-decoration:underline" @click="$router.push('/jcgzgl/ggck')">更多</a>
                    </div>
                    <div>
                        <div v-for="(item,index) in noticeList" :key="index">
                            <div class="announcement-updates-for-nr" >
                                <span class="as-nr-title" >
                                    <a href="#" @click="noticeDetails(item)">{{ item.fggbt }}</a>
                                </span>
                                <span class="as-nr-time">{{ item.ffbsj }}</span>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="study-box" :style="{height:'calc(100vh - '+(130+calendarHeight)+'px)'}">
                    <div style="padding: 0 6px;display: flex;justify-content: space-between;align-items: center;">
                        <h3 class="title-h3" >学习动态</h3>
                        <a href="#" style="text-decoration:underline" @click="$router.push('/jcgzgl/xxdt')">更多</a>
                    </div>
                    <div>
                        <div v-for="(item,index) in trendsList" :key="index" >
                            <div class="announcement-updates-for-nr">
                                <span class="as-nr-title" @click="trendsDetails(item)">
                                    <a href="#">{{ item.fbt }}</a>
                                </span>
                                <span class="as-nr-time">{{ item.ffbsj }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 30% -->
        <!-- 日程 -->
        <div class="inspectorManage-n-1-right" >
            <div id="calendar-box" style="border-bottom: 1px solid #e4e3e3;">
                <a-calendar :fullscreen="false" @panelChange="onPanelChange" :header-render="headerRender" >
                    <template slot="dateCellRender" slot-scope="value" >
                        <span v-if="showSpot(value)" style="padding-left: 10px;">
                            <a-badge status="processing" />
                        </span>
                    </template>
                </a-calendar>
            </div>
            <div class="schedule-box" :style="{height:' calc(100vh -'+ (calendarHeight + 124)+'px)',}" style="overflow: auto;">
                <div v-for="(item,index) in spcyMyInfogetJcrcList" :key="index">
                    <div class="schedule-for-box">
                        <span class="sc-type">{{ item.jbxx?item.jbxx.fssk:'' }}</span>
                        <div class="schedule-content">
                            <span class="sc-title" >{{ item.jbxx?item.jbxx.fqymc:'' }}</span>
                            <span class="sc-title" style="font-weight: 400;">{{ item.jbxx?item.jbxx.fsxmc:'' }}</span>
                            <span style="display: flex;align-items: center;color: #b0b0b0;font-weight: 500;">
                                <span class="iconfont spcy-icon-ditu4"></span>
                                <span style="flex: 1;display: inline-block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;" :style="{width:windowInnerWidth+'px'}">
                                {{ item.jbxx?item.jbxx.fqyzszcdz:'' }}</span>
                                <!-- text-overflow: ellipsis;
                                white-space: nowrap; -->
                            </span>
                            <span style="font-size: 12px;color: #b0b0b0;font-weight: 400;" v-if="item.jbxx && item.jbxx.fcykssj && item.jbxx.fcyjssj">{{ item.jbxx.fcykssj }}至{{ item.jbxx.fcyjssj }}</span>
                            <!-- <div style="text-align: right;">
                                <span>{{ item.sj }}</span>
                            </div> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <addAndEditModal ref="addAndEditModalRef" :formObj="formObj" />
        <studyIndex ref="studyIndexRef" />
    </div>
</template>
<script>
import {
    spcyMyInfogetJcrc,
    spcyMyInfogetJcyYearJcqk,
    noticequeryPageYxNotice,
    partyXxzlqueryXxdtPageList,
    spcyMyInfoflowDbSizeMap,
} from './service/index'
import addAndEditModal from '../../notice/addAndEdit.vue'
import studyIndex from '../../studyInformation/study/addEdit.vue'
export default {
    components:{
        addAndEditModal,
        studyIndex,
    },
    props:{

    },
    data(){
        return{
            //日程
            spcyMyInfogetJcrcList:[],
            windowInnerHeight:window.innerHeight,
            dateList:[],
            //年度选派及审评情况
            overallSituation:{},
            //公告
            noticeList:[],
            //学习动态
            trendsList:[],
            formObj:{},

            studyList:[{
                title:'关于开展2024年药品注册继续教育培训药品注册继续教育培训药品注册继续教育培训药品注册继续教育培训药品注册继续教育培训',
                time:'2024-01-05'
            },{
                title:'关于开展2024年药品注册继续教育培训药品注册继续教育培训药品注册继续教育培训药品注册继续教育培训药品注册继续教育培训',
                time:'2024-01-05'
            },{
                title:'关于开展2024年药品注册继续教育培训',
                time:'2024-01-05'
            }],
            calendarHeight:310,
            inspectorManageLeftKet:null,
            commonFunctionsList:[{
                icon:'spcy-icon-jiancha2',
                path:'/dbrw/dbjc',
                title:'技术审评',
            },{
                icon:'spcy-icon-shujucaiji-',
                title:'见习考评',
                path:'/dbrw/ybjcykp',
            },{
                icon:'spcy-icon-shijuanzongfen',
                title:'年度考评',
                path:'/dbrw/dbndkp',
            },{
                icon:'spcy-icon-jiancha2',
                path:'/dbrw/dbjc',
                title:'技术审评',
            },{
                icon:'spcy-icon-shujucaiji-',
                title:'见习考评',
                path:'/dbrw/ybjcykp',
            },{
                icon:'spcy-icon-shijuanzongfen',
                title:'年度考评',
                path:'/dbrw/dbndkp',
            }],
            scheduleList:[{
                type:'组长',
                title:'xx修正制药有限公司药品生产质量管理规范符合性审评申请',
                dz:'xx南宁市青秀区XXXXXX',
                sj:'2024-01-06',
            }],
            spcyCount:0,
            jcgzkhCount:0,
            windowInnerWidth:window.innerWidth * 0.3 - 130,
        }
    },
    computed: {
        menus(){
            //console.log(this.$store.state.user.modulemenuList)
            return this.$store.state.user.modulemenuList
        }
    },
    watch:{

    },
    mounted(){
        this.$nextTick(()=>{
            this.calendarHeight = document.getElementById('calendar-box').offsetHeight
            //console.log(this.calendarHeight)
            this.inspectorManageLeftKet = Date.now()
        })
        this.getData()
    },
    methods:{
        getData(){
            //日程
            spcyMyInfogetJcrc().then(res=>{
                if(res.code == 200){
                    //console.log('日程数据',res)
                    this.spcyMyInfogetJcrcList = res.result.jcrcList
                    res.result.jcrcList.forEach((item,index) => {
                        item.dateList.forEach((trem,index)=>{
                            let arr = this.dateList.filter(i=>i == trem)
                            if(!arr.length){
                                this.dateList.push(trem)
                            }
                        })
                    });
                }
            })
            //年度选派及审评情况
            spcyMyInfogetJcyYearJcqk().then(res=>{
                if(res.code == 200){
                    //console.log('年度选派及审评情况',res.result)
                    this.overallSituation = res.result
                }else{
                    this.overallSituation = {}
                }
            })
            //通知公告
            noticequeryPageYxNotice({pageNo:1,pageSize:5}).then(res=>{
                if(res.code == 200){
                    this.noticeList = res.result.records
                }
            })
            //学习动态
            partyXxzlqueryXxdtPageList({pageNo:1,pageSize:5}).then(res=>{
                if(res.code == 200){
                    this.trendsList = res.result.records
                }
            })
            //获取待办数量
            spcyMyInfoflowDbSizeMap().then(res=>{
                if(res.code == 200){
                    //console.log('获取待办数量',res)
                    this.spcyCount = res.result.spcyCount
                    this.jcgzkhCount = res.result.jcgzkhCount
                }else{}
            })
        },
        noticeDetails(row){
            
            this.formObj = {
                title: row.fggbt,
                id: row.id,
                type: 'view'
            }
            this.$refs.addAndEditModalRef.editorVisible = true
            //console.log(88888)
        },
        trendsDetails(val){
            this.$refs.studyIndexRef.visible = true
            this.$refs.studyIndexRef.getData({...val,index:0,view:true})
        },
        onPanelChange(){
        //     const fileData = new FormData();
        //   fileData.append("file",file);
        //   fileData.append("oaid",id);
        //   //console.log(fileData)
        },
        showSpot(value) {
            let flag;
            this.dateList.map(date=>{
                if(date==value.format('YYYY-MM-DD')) {
                    flag = true;
                }
            })
            return flag;
        },
        headerRender({ value, type, onChange, onTypeChange }) {
            const start = 0;
            const end = 12;
            const monthOptions = [];

            const current = value.clone();
            const localeData = value.localeData();
            const months = [];
            for (let i = 0; i < 12; i++) {
                current.month(i);
                months.push(localeData.monthsShort(current));
            }

            for (let index = start; index < end; index++) {
                monthOptions.push(
                <a-select-option class="month-item" key={`${index}`}>
                    {months[index]}
                </a-select-option>,
                );
            }
            const month = value.month();

            const year = value.year();
            const options = [];
            for (let i = year - 10; i < year + 10; i += 1) {
                options.push(
                <a-select-option key={i} value={i} class="year-item">
                    {i}
                </a-select-option>,
                );
            }
            return (
                <div style={{ padding: '6px',display: 'flex',alignItems: 'center',justifyContent: 'space-between' }}>
                    <h3 class='title-h3'>审评日程</h3>
                    <div style='display: flex;'>
                        <div style='padding-right:5px;'>
                            <a-select
                                size="small"
                                dropdownMatchSelectWidth={false}
                                class="my-year-select"
                                onChange={newYear => {
                                const now = value.clone().year(newYear);
                                onChange(now);
                                }}
                                value={String(year)}
                            >
                                {options}
                            </a-select>
                        </div>
                        
                        <div>
                        <a-select
                            size="small"
                            dropdownMatchSelectWidth={false}
                            value={String(month)}
                            onChange={selectedMonth => {
                            const newValue = value.clone();
                            newValue.month(parseInt(selectedMonth, 10));
                            onChange(newValue);
                            }}
                        >
                            {monthOptions}
                        </a-select>
                    </div>
                    </div>
                </div>
            );
        },
        
    }
}
</script>
<style lang="less">
.inspectorManage-n-1-staging{
    display: flex;
    justify-content: space-between;
    .title-h3{
        display: block;
        font-weight: 600;
        margin: 0;
    }
    .inspectorManage-n-1-left{
        display: flex;
        flex-direction: column;
        margin: 0 6px;
        margin-top: 6px;
        width: calc(70% - 12px);
        // border: 1px solid #e4e3e3;
        height: calc(100vh - 182px);
        .toDoTasks-annual-box{
            display: flex;
            margin-bottom: 6px;
            .toDoTasks-box{
                border: 1px solid #e4e3e3;
                margin-right: 6px;
                width: calc(65% - 6px);
                display: flex;
                flex-direction: column;
                overflow: auto;
                justify-content: space-evenly;
                .toDoTasks-list{
                    padding: 2px 6px;
                    margin-bottom: 3px;
                    height: calc(50% - 3px);
                    border: 1px solid #e4e3e3;
                    overflow: auto;
                }
                .common-functions{
                    padding: 6px;
                    margin-top: 3px;
                    height: calc(50% - 3px);
                    border: 1px solid #e4e3e3;
                    overflow: auto;
                }
                .toDoTasks-annual-for{
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    text-align: center;
                    position: relative;
                    .tips-box{
                        position: absolute;
                        width: 30px;
                        height: 30px;
                        background: #f73131;
                        text-align: center;
                        line-height: 30px;
                        color: #fff;
                        font-weight: 600;
                        font-size: 14px;
                        border: 1px solid #fff;
                        border-radius: 15px;
                        border-bottom-left-radius: 0;
                        top: -20px;
                        right: -6px;
                        box-shadow: 4px 4px 3px rgba(107, 103, 103, 0.8);
                    }
                    .at-y-icon{
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 80px;
                        height: 80px;
                        background: #e4d329;
                        border-radius: 50%;
                        
                        color: #fff;
                        .iconfont{
                            font-size: 30px;
                        }
                    }
                    .at-y-title{
                        font-size: 16px;
                    }
                    .at-y-bg1{
                        background: #5077ee;
                    }
                    .at-y-bg2{
                        background: #50ccee;
                    }
                    .at-y-bg3{
                        background: #9c50ee;
                    }
                    .at-y2-bg4{
                        background: #509aee;
                    }
                    .at-y2-bg5{
                        background: #ee5068;
                    }
                    .at-y2-bg6{
                        background: #eeb450;
                    }
                }
            }
            .annual-box{
                width: calc(35% - 0px);
                display: flex;
                flex-direction: column;
                overflow: auto;
                .annual-select{
                    padding: 2px 6px;
                    height: calc(50% - 3px);
                    margin-bottom: 3px;
                    border: 1px solid #e4e3e3;
                    overflow: auto;
                    
                }
                .annual-num{
                    font-size: 32px;
                } 
                .num-green{
                    color: #1dbe43;
                }
                .num-hs{
                    color: #e4d329;
                }
                .annual-education{
                    padding: 6px;
                    margin-top: 3px;
                    height: calc(50% - 3px);
                    border: 1px solid #e4e3e3;
                    overflow: auto;
                }

            }
        }
        
        .announcement-updates-box{
            flex: 1;
            display: flex;
            .notice-box{
                padding: 6px 0;
                height: 100%;
                margin-right: 3px;
                border: 1px solid #e4e3e3;
                width: calc(50% - 3px);
                overflow: auto;
            }
            .study-box{
                padding: 6px 0;
                height: 100%;
                margin-left: 3px;
                border: 1px solid #e4e3e3;
                width: calc(50% - 3px);
                overflow: auto;
            }
            .announcement-updates-for-nr{
                display: flex;
                align-items: center;
                padding: 3px 0;
                border-top: 1px solid #e4e3e3;
                // font-size: 12px;
                .as-nr-title{
                    flex: 1;
                    display: inline-block;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    margin: 0 5px;
                    text-decoration:underline
                }
                .as-nr-time{
                    display: inline-block;
                    margin: 0 5px;
                }
            }
        }
        
    }
    .inspectorManage-n-1-right{
        margin-top: 6px;
        margin-right: 6px;
        width: calc(30% - 6px);
        border: 1px solid #e4e3e3;
        height: calc(100vh - 124px);
        display: flex;
        flex-direction: column;
        overflow: auto;
        .schedule-box{
            // border: 1px solid #e4e3e3;
            .schedule-for-box{
                display: flex;
                align-items: center;
                padding: 5px;
                border-bottom: 1px solid #e4e3e3;
                .sc-type{
                    padding-right: 5px;
                    display: inline-block;
                    width: 20px;
                    border-right: 1px solid #e4e3e3;
                    font-weight: 600;
                }
                .schedule-content{
                    padding-left: 5px;
                    font-weight: 600;
                    .sc-title{
                        display:block;
                        text-overflow: -o-ellipsis-lastline;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        line-clamp: 2;
                        -webkit-box-orient: vertical;
                    }
                }
                
            }

        }
    }
}
</style>